<template>
  <div>
    <el-input v-if="!ifmobile" placeholder="建议不要超过20字" v-model="article.title" style="width:30%;" id="title">
      <template slot="prepend">标题</template>
    </el-input>
    &nbsp;
    <el-input v-if="!ifmobile" placeholder="建议不要超过8字" v-model="article.editor" style="width:30%;" id="editor">
      <template slot="prepend">昵称</template>
    </el-input>
    <el-input v-if="ifmobile" placeholder="建议不要超过20字" v-model="article.title" style="margin:10px;"
    id="mtitle" @input="focus()">
      <template slot="prepend">标题</template>
    </el-input>
    <el-input v-if="ifmobile" placeholder="建议不要超过8字" v-model="article.editor" style="margin:10px;" id="meditor" @input="focus()">
      <template slot="prepend">昵称</template>
    </el-input>
    <el-button type="primary" round style="margin-left:10px;margin:10px;" @click="submit">提交</el-button>
    <el-button type="warning" round style="margin-left:10px;" @click="view">文章页面</el-button>
    <el-divider content-position="left">
      <span style="color:#888888;">
        作者 : {{ article.author }} <el-divider direction="vertical"></el-divider>
        最近编辑者 : {{ article.lasteditor }} <el-divider direction="vertical"></el-divider>
        发布时间 : {{ article.pubdate }} <el-divider direction="vertical"></el-divider>
        最近更新时间 : {{ article.update }}
      </span>
    </el-divider><br/>
    <mavon-editor v-model="article.content" style="min-width: 70vw" :tabSize="4" @change="change" @save="submit"/>
  </div>
</template>

<script>
// @ is an alias to /src
function getTime () {
  const date = new Date()
  const y = date.getFullYear()
  const mo = date.getMonth() + 1
  const d = date.getDate()
  const h = date.getHours()
  const m = date.getMinutes()
  const s = date.getSeconds()
  return y + '-' + (mo < 10 ? '0' + mo : mo) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s)
}
export default {
  name: 'Home',
  data () {
    return {
      article: {
        content: '',
        title: '',
        lasteditor: '',
        ifchange: false
      },
      ifchange: false,
      last: {
        content: '',
        title: '',
        editor: ''
      },
      ifmobile: window.ifmobile,
      titlev: false,
      editorv: false,
      mtitlev: false,
      meditorv: false
    }
  },
  created () {
    this.axios.get('https://lycm.xyz/api/articles/' + this.$route.params.id + '/')
      .then((res) => {
        this.article = res.data
        this.last.editor = this.article.lasteditor = this.article.editor
        this.article.editor = ''
        this.last.title = this.article.title
        this.lastcontent = this.last.content = this.article.content
        document.title = this.article.title + ' - 编辑 - RookieWiki'
      })
      .catch((err) => {
        this.$notify.error({
          title: '在向服务器请求数据时出现错误',
          message: err
        })
      })
  },
  methods: {
    submit: function () {
      if (this.last.content === this.article.content && this.last.title === this.article.title && this.last.editor === this.article.editor) {
        this.$notify({
          title: '警告',
          message: '并未有任何改动!',
          type: 'warning'
        })
        return
      }
      if (!this.article.title) {
        this.$notify.error({
          title: '标题为必填项',
          message: '请填写该文章的标题!'
        })
        if (this.ifmobile) document.getElementById('mtitle').focus()
        else document.getElementById('title').focus()
        return
      }
      if (!this.article.editor) {
        this.$notify.error({
          title: '编辑者为必填项',
          message: '请填写您的昵称!'
        })
        if (this.ifmobile) document.getElementById('meditor').focus()
        else document.getElementById('editor').focus()
        return
      }
      this.axios({
        url: 'https://lycm.xyz/api/articles/' + this.article.id + '/',
        method: 'patch',
        headers: {
          'Content-Type': 'application/json'
        },
        crossDomain: true,
        data: {
          title: this.article.title,
          content: this.article.content,
          editor: this.article.editor,
          update: getTime()
        }
      }).then(() => {
        this.lastcontent = this.article.content
        this.ifchange = false
        this.$notify({
          title: '保存成功,请等待管理员审核',
          type: 'success'
        })
        this.article.update = getTime()
        this.article.lasteditor = this.article.editor
        this.last.content = this.article.content
        this.last.title = this.article.title
        this.last.editor = this.article.editor
        document.title = this.article.title + ' - 编辑 - RookieWiki'
      }).catch((err) => {
        this.$notify.error({
          title: '在向服务器上传数据时出现错误',
          message: err
        })
      })
    },
    view: function () {
      this.$router.push('/article/' + this.article.id)
      // const routeUrl = this.$router.resolve('/article/' + this.article.id)
      // window.open(routeUrl.href, '_blank')
    },
    change: function () {
      if (this.lastcontent === this.article.content) return
      this.ifchange = true
    }
  },
  beforeRouteLeave (to, form, next) {
    if (this.ifchange) {
      this.$confirm('将丢失未保存内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        next()
      }).catch(() => {})
    } else {
      next()
    }
  }
}
</script>
<style scoped>
</style>
